<template>
    <div>
        <div class="content package-detail" v-loading="loading">
            <el-container>
                <el-aside width="2.2rem" class="cont-left">
                    <el-container>
                        <el-header :height="'auto'">
                            <div class="head clearfix">
                                <span class="add" @click="showChooseApi=true" v-if="isEdit"><i class="el-icon-plus"></i></span>
                                所需数源接口
                            </div>
                        </el-header>
                        <el-main>
                            <div class="list">
                                <div class="clearfix ellipsis" v-for="(item, index) in detailPageData.relateInfo"
                                     :key="index"
                                     :title="item.name">
                                    <span class="remove" v-if="isEdit" @click="removeRelateInfo(index)"><i
                                        class="el-icon-close"></i></span>
                                    <i class="iconfont icon-jiekou icon"></i>{{item.name}}
                                </div>
                            </div>
                        </el-main>
                    </el-container>
                </el-aside>
                <el-main class="cont-right">
                    <div class="white-block">
                        <div class="detail" v-show="!isEdit">
                            <div class="title">接口基本信息</div>
                            <div class="cont">
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <div class="grid-content bg-purple sysMsg">
                                            <span class="sysTitle">接口名称：</span>
                                            <el-tooltip class="item" effect="dark"
                                                        :content="detail.base&&detail.base.serviceName"
                                                        placement="top-start">
                                                <span
                                                    class="serviceContent ellipsis">{{detail.base&&detail.base.serviceName}}</span>
                                            </el-tooltip>
                                        </div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="grid-content bg-purple sysMsg">
                                            <span class="sysTitle">接口编码：</span>
                                            <el-tooltip class="item" effect="dark"
                                                        :content="detail.base&&detail.base.serviceCode"
                                                        placement="top-start">
                                                <span
                                                    class="serviceContent">{{detail.base&&detail.base.serviceCode}}</span>
                                            </el-tooltip>
                                        </div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="grid-content bg-purple sysMsg">
                                            <span class="sysTitle">超时时间(ms)：</span>
                                            <span class="serviceContent">{{detail.base&&detail.base.overtime}}</span>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                            <div class="title">接口入参</div>
                            <div class="cont">
                                <table-example :data="detail.input" :tableColumn="header" :border="true"
                                               class="mt20">
                                </table-example>
                            </div>
                            <div class="title">接口出参</div>
                            <div class="cont">
                                <table-example :data="detail.output" :tableColumn="header" :border="true" class="mt20">
                                </table-example>
                            </div>
                            <div class="btns cont mt30">
                                <el-button type="warning" @click="openApiTest">接口测试</el-button>
                                <el-button plain @click="changeEdit">编辑</el-button>
                            </div>
                        </div>
                        <div class="edit-detail" v-show="isEdit">
                            <div class="steps">
                                <div class="step" :class="{finish: activeStep>1}" v-if="activeStep>0">
                                    <div class="step-head">
                                        <div class="icon" v-if="activeStep==1">
                                            <i class="iconfont icon-liucheng-active"></i>
                                            <span>1</span>
                                        </div>
                                        <div class="icon" v-else>
                                            <i class="iconfont icon-liucheng"></i>
                                        </div>
                                    </div>
                                    <div class="step-main">
                                        <div class="title">
                                            接口基本信息
                                        </div>
                                        <el-row :gutter="20" v-if="activeStep!=1">
                                            <el-col :span="12">
                                                <div class="grid-content bg-purple sysMsg">
                                                    <span class="sysTitle">接口名称：</span>
                                                    <el-tooltip class="item" effect="dark"
                                                                :content="infoForm.serviceName" placement="top-start">
                                                        <span class="serviceContent">{{infoForm.serviceName}}</span>
                                                    </el-tooltip>
                                                </div>
                                            </el-col>
                                            <el-col :span="12">
                                                <div class="grid-content bg-purple sysMsg">
                                                    <span class="sysTitle">接口编码：</span>
                                                    <el-tooltip class="item" effect="dark"
                                                                :content="infoForm.serviceCode" placement="top-start">
                                                        <span class="serviceContent">{{infoForm.serviceCode}}</span>
                                                    </el-tooltip>
                                                </div>
                                            </el-col>
                                            <el-col :span="12">
                                                <div class="grid-content bg-purple sysMsg">
                                                    <span class="sysTitle">超时时间(ms)：</span>
                                                    <span class="serviceContent">{{infoForm.overtime}}</span>
                                                </div>
                                            </el-col>
                                        </el-row>
                                        <el-form ref="infoForm" :model="infoForm" :rules="infoFormRules"
                                                 :label-position="'left'" label-width="1.3rem" v-if="activeStep==1">
                                            <div class="el-row" :gutter="20">
                                                <el-col :span="10">
                                                    <el-form-item label="接口名称" prop="serviceName">
                                                        <el-input v-model="infoForm.serviceName"
                                                                  placeholder=""></el-input>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="10" :offset="2">
                                                    <el-form-item label="接口编码" prop="serviceCode">
                                                        <el-input v-model="infoForm.serviceCode"
                                                                  placeholder=""></el-input>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="10">
                                                    <el-form-item label="超时时间(ms)" prop="overtime">
                                                        <!--                                                        <el-input v-model="infoForm.overtime" placeholder=""></el-input>-->
                                                        <el-input-number v-model="infoForm.overtime" :min="1"
                                                                         :controls="false" :precision="0"
                                                                         class="full input-number"></el-input-number>
                                                    </el-form-item>
                                                </el-col>
                                            </div>
                                        </el-form>
                                    </div>
                                </div>
                                <div class="step" :class="{finish: activeStep>2}" v-if="activeStep>1">
                                    <div class="step-head">
                                        <div class="icon" v-if="activeStep==2">
                                            <i class="iconfont icon-liucheng-active"></i>
                                            <span>2</span>
                                        </div>
                                        <div class="icon" v-else>
                                            <i class="iconfont icon-liucheng"></i>
                                        </div>
                                    </div>
                                    <div class="step-main">
                                        <div class="title">
                                            接口设计
                                            <span class="add" v-if="activeStep==2" @click="openDesign">+ 添加</span>
                                        </div>
                                        <div class="import">
                                            <div class="list" v-for="(list, index) in detailPageData.threadInfo"
                                                 :key="index">
                                                <div class="name">
                                                    线程{{list.num}}
                                                </div>
                                                <div class="cont">
                                                    <ul class="clearfix">
                                                        <li class="ellipsis" v-for="(item, i) in list.list" :key="i"
                                                            :title="item.name">
                                                            {{item.name}}
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="remove" v-if="activeStep==2"
                                                     @click="removeThread(index, list)">
                                                    <i class="el-icon-close"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="step" :class="{finish: activeStep>3}" v-if="activeStep>2">
                                    <div class="step-head">
                                        <div class="icon" v-if="activeStep==3">
                                            <i class="iconfont icon-liucheng-active"></i>
                                            <span>3</span>
                                        </div>
                                        <div class="icon" v-else>
                                            <i class="iconfont icon-liucheng"></i>
                                        </div>
                                    </div>
                                    <div class="step-main">
                                        <div class="title">
                                            接口入参管理
                                            <span class="add" v-if="activeStep==3" @click="openAddImport">+ 添加</span>
                                        </div>
                                        <div class="export">
                                            <div class="list" v-for="(item, index) in detailPageData.paramConfInfo"
                                                 :key="index">
                                                <div class="name">
                                                    线程{{item.threadId}}
                                                </div>
                                                <div class="cont">
                                                    <ul class="clearfix">
                                                        <li class="ellipsis"
                                                            :title="item.serviceName + '：' + item.paramKey">
                                                            {{item.serviceName + '：' + item.paramKey}}
                                                        </li>
                                                        <div class="icon">
                                                            <i class="iconfont icon-guanlian"></i>
                                                        </div>
                                                        <li class="ellipsis"
                                                            :title="item.relatedServiceName + '：' + item.relatedParamKey">
                                                            {{item.relatedServiceName + '：' + item.relatedParamKey}}
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="remove" v-if="activeStep==3" @click="removeImport(index)">
                                                    <i class="el-icon-close"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="step" :class="{finish: activeStep>4}" v-if="activeStep>3">
                                    <div class="step-head">
                                        <div class="icon" v-if="activeStep==4">
                                            <i class="iconfont icon-liucheng-active"></i>
                                            <span>4</span>
                                        </div>
                                        <div class="icon" v-else>
                                            <i class="iconfont icon-liucheng"></i>
                                        </div>
                                    </div>
                                    <div class="step-main">
                                        <div class="title">
                                            接口出参管理
                                            <span class="add" v-if="activeStep==4" @click="openAddExport">+ 添加</span>
                                        </div>
                                        <div class="design">
                                            <div class="list" v-for="(item, index) in detailPageData.outputParamInfo"
                                                 :key="index">
                                                <div class="cont">
                                                    <ul class="clearfix">
                                                        <li class="ellipsis" :title="item.serviceName">
                                                            {{item.serviceName}}
                                                        </li>
                                                        <li class="ellipsis" :title="item.paramKey">
                                                            {{item.paramKey}}
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="remove" v-if="activeStep==4" @click="removeExport(index)">
                                                    <i class="el-icon-close"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="btns text-right mt30">
                                <el-button plain @click="changeEdit()" v-if="id">退出编辑</el-button>
                                <el-button plain v-if="activeStep>1" @click="activeStep--">上一步</el-button>
                                <el-button type="primary" @click="stepNext">{{activeStep>3 ? '保存' : '下一步'}}
                                </el-button>
                            </div>
                        </div>
                    </div>
                </el-main>
            </el-container>
            <!-- 选择所需数源接口弹窗-->
            <dialog-msk :show.sync="showChooseApi" ref="chooseApiDialog" :center="true" :title="'选择所需数源接口'"
                        @save="save"
                        @cancel="close"
                        :noEsc="false"
                        :noModal="false"
                        :appendBody="true">
                <div>
                    <div class="service-tree treeBar" v-if="showChooseApi">
                        <el-tree :data="nodeData" :props="defaultProps" :load="loadNode" :lazy="true"
                                 :expand-on-click-node="false" :check-on-click-node="true" :default-expanded-keys="[1]"
                                 :highlight-current="true" node-key="id" ref="serviceTree">
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                             <template v-if="data.haschildren == 1">
                             <i class="iconfont icon-wenjianjia small file"></i>
                             <span class="el-tree-node__label">{{ data.name }}</span>
                             </template>
                             <template v-if="data.haschildren == 0">
                                 <el-checkbox v-model="data.checked" @change="apiCheckChange(data.checked, data)">
                                 </el-checkbox>
                                 <span class="el-tree-node__label">{{ data.name }}</span>
                             </template>
                        </span>
                        </el-tree>
                    </div>
                </div>
            </dialog-msk>
            <!-- 新增线程弹框-->
            <dialog-msk :show.sync="showDesign" ref="designDialog" :center="true" :title="'所需数源接口列表'"
                        @save="saveDesign"
                        @cancel="closeDesign"
                        :noEsc="false"
                        :noModal="false"
                        :appendBody="true">
                <!--                <div class="tips error">注：已选的接口不能再选</div>-->
                <div class="design-list">
                    <div v-for="(item, index) in chooseDesignList" :key="index" class="ellipsis">
                        <div class="icon">
                            <i class="el-icon-top" v-if="index!=0" @click="moveList(0, item, index)"></i>
                            <i class="el-icon-bottom" v-if="index!=chooseDesignList.length-1"
                               @click="moveList(1, item, index)"></i>
                        </div>
                        <!--                        <el-checkbox v-model="item.checked" :disabled="item.exist">-->
                        <el-checkbox v-model="item.checked">
                        </el-checkbox>
                        <span>{{ item.name }}</span>
                    </div>
                </div>
            </dialog-msk>
            <!-- 新增接口入参弹框-->
            <dialog-msk :show.sync="showAddImport" ref="addImportDialog" :center="true" :title="'添加接口入参'"
                        @save="saveAddImport"
                        @cancel="closeAddImport"
                        :noEsc="false"
                        :noModal="false"
                        :appendBody="true" :width="'7.6rem'">
                <div class="add-import-head">
                    <span>线程列表</span>
                    <el-select v-model="addImportDesign" placeholder="请选择线程" class="full" @change="changeImportDesign">
                        <el-option
                            v-for="item in detailPageData.threadInfo"
                            :key="item.num"
                            :label="'线程' + item.num"
                            :value="item.num">
                        </el-option>
                    </el-select>
                </div>
                <div class="add-import-content">
                    <div class="left">
                        <template v-if="addImportDesign">
                            <div class="api-list" v-show="!importLeftShow">
                                <el-container>
                                    <el-header :height="'auto'">
                                        <div class="title">
                                            接口列表
                                        </div>
                                    </el-header>
                                    <el-main>
                                        <div class="list-cont">
                                            <div class="list ellipsis" v-for="(item, index) in addImportDesignLeftList"
                                                 :class="{disabled: item.disabled || index==0, active: item.id==addImportDesignLeft.apiId}"
                                                 :key="index" @click="chooseDesignLeftApi(item, index)">
                                                {{item.name}}
                                            </div>
                                        </div>
                                    </el-main>
                                </el-container>
                            </div>
                            <div class="params-list" v-show="importLeftShow">
                                <el-container>
                                    <el-header :height="'auto'">
                                        <div class="title ellipsis">
                                            <i class="el-icon-arrow-left back" @click="chooseDesignLeftBack()"></i>
                                            <span
                                                :title="addImportDesignLeft.apiName">{{addImportDesignLeft.apiName}}</span>
                                        </div>
                                    </el-header>
                                    <el-main v-loading="addImportDesignLeftLoading">
                                        <div class="list-cont">
                                            <div class="list ellipsis" v-for="(list, i) in addImportDesignLeft.params"
                                                 :class="{disabled: list.disabled}"
                                                 :key="i" v-if="list.paramKey" @click="chooseDesignLeftParam(list)">
                                                <span class="checked" v-if="addImportDesignLeft.paramId==list.id">
                                                    <i class="el-icon-check"></i>
                                                </span>
                                                {{list.paramKey}}
                                            </div>
                                            <div class="empty"
                                                 v-if="addImportDesignLeft.params.length<1 && !addImportDesignLeftLoading">
                                                暂无信息
                                            </div>
                                        </div>
                                    </el-main>
                                </el-container>
                            </div>
                        </template>
                        <div class="empty" v-else>
                            请选择线程
                        </div>
                    </div>
                    <div class="middle">
                        <i class="iconfont icon-guanlian"></i>
                    </div>
                    <div class="right">
                        <template v-if="addImportDesignLeft.paramId">
                            <div class="api-list" v-show="!importRightShow">
                                <el-container>
                                    <el-header :height="'auto'">
                                        <div class="title ellipsis">
                                            接口列表
                                        </div>
                                    </el-header>
                                    <el-main>
                                        <div class="list-cont">
                                            <div class="list ellipsis" v-for="(item, index) in addImportDesignRightList"
                                                 :class="{disabled: item.disabled || (index+1)==addImportDesignRightList.length, active: item.id==addImportDesignRight.apiId}"
                                                 :key="index" @click="chooseDesignRightApi(item, index)">
                                                {{item.name}}
                                            </div>
                                        </div>
                                    </el-main>
                                </el-container>
                            </div>
                            <div class="params-list" v-show="importRightShow">
                                <el-container>
                                    <el-header :height="'auto'">
                                        <div class="title ellipsis">
                                            <i class="el-icon-arrow-left back" @click="chooseDesignRightBack()"></i>
                                            <span
                                                :title="addImportDesignRight.apiName">{{addImportDesignRight.apiName}}</span>
                                        </div>
                                    </el-header>
                                    <el-main v-loading="addImportDesignRightLoading">
                                        <div class="list-cont">
                                            <div class="list" v-for="(list, i) in addImportDesignRight.params" :key="i"
                                                 v-if="list.paramKey" @click="chooseDesignRightParam(list)">
                                                <span class="checked" v-if="addImportDesignRight.paramId==list.id">
                                                    <i class="el-icon-check"></i>
                                                </span>
                                                {{list.paramKey}}
                                            </div>
                                            <div class="empty"
                                                 v-if="addImportDesignRight.params.length<1 && !addImportDesignRightLoading">
                                                暂无信息
                                            </div>
                                        </div>
                                    </el-main>
                                </el-container>
                            </div>
                        </template>
                        <div class="empty" v-else>
                            {{addImportDesign ? '请选择左侧接口入参' : '请选择线程'}}
                        </div>
                    </div>
                </div>
            </dialog-msk>
            <!-- 新增接口出参弹框-->
            <dialog-msk :show.sync="showAddExport" ref="addExportDialog" :center="true" :title="'添加接口出参'"
                        @save="saveAddExport"
                        @cancel="closeAddExport"
                        :noEsc="false"
                        :noModal="false"
                        :appendBody="true" :width="'7.6rem'">
                <div class="add-export-content">
                    <div class="left">
                        <div class="api-list">
                            <el-container>
                                <el-header :height="'auto'">
                                    <div class="title">
                                        接口列表
                                    </div>
                                </el-header>
                                <el-main>
                                    <div class="list-cont">
                                        <div class="list ellipsis" v-for="(item, index) in addExportLeftList"
                                             :class="{active: item.id==addExport.apiId}"
                                             :key="index" @click="chooseExportLeftApi(item)">
                                            {{item.name}}
                                        </div>
                                    </div>
                                </el-main>
                            </el-container>
                        </div>
                    </div>
                    <div class="middle">

                    </div>
                    <div class="right">
                        <template v-if="addExport.apiId">
                            <div class="params-list">
                                <el-container>
                                    <el-header :height="'auto'">
                                        <div class="title">
                                            出参列表
                                        </div>
                                    </el-header>
                                    <el-main v-loading="addExportRightLoading">
                                        <div class="list-cont">
                                            <div class="list" v-for="(list, i) in addExportRightList" :key="i"
                                                 v-if="list.paramKey" @click="chooseExportRightParam(list)">
                                                <span class="checked" v-if="addExport.paramId==list.id">
                                                    <i class="el-icon-check"></i>
                                                </span>
                                                {{list.paramKey}}
                                            </div>
                                            <div class="empty"
                                                 v-if="addExportRightList.length<1 && !addExportRightLoading">
                                                暂无信息
                                            </div>
                                        </div>
                                    </el-main>
                                </el-container>
                            </div>
                        </template>
                        <div class="empty" v-else>
                            请选择左侧接口
                        </div>
                    </div>
                </div>
            </dialog-msk>
            <!-- 接口测试弹框-->
            <dialog-msk :show.sync="showApiTest" ref="apiTestDialog" :center="true" :noEsc="false" :noModal="false"
                        :width="'7rem'" :appendBody="true"
                        :title="'接口测试'">
                <div class="apiTest">
                    <div class="title">接口入参</div>
                    <el-form ref="addForm" label-width="1rem" label-position="left">
                        <el-form-item v-for="(item,index) in apiTestForm" :key="index">
                            <div class="label ellipsis" slot="label" :title="item.key">
                                {{item.key}}
                            </div>
                            <el-input v-model="item.value"></el-input>
                        </el-form-item>
                    </el-form>
                    <div class="title">返回结果</div>
                    <div class="result">
                        <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4}" v-model="apiTestResult"
                                  readOnly>
                        </el-input>
                    </div>
                </div>
                <span slot="footer">
                    <slot name="footer">
                        <el-button @click="closeApiTest">取 消</el-button>
                        <el-button type="primary" @click="saveApiTest">发 送</el-button>
                    </slot>
                </span>
            </dialog-msk>
        </div>
    </div>
</template>

<script>
    import dialogMsk from '../../components/dialog'
    import tableExample from '../../components/table'

    export default {
        data() {
            return {
                loading: false,
                id: '', // 封装的接口id
                detailPageData: {
                    relateInfo: [], // 左侧数据接口集
                    baseInfo: {
                        id: '',
                        serviceName: '',
                        serviceCode: '',
                        overtime: 30000
                    }, // 基本信息
                    threadInfo: [], // 线程设计
                    paramConfInfo: [], // 入参管理
                    outputParamInfo: [] // 出参管理
                }, // 编辑时详细信息
                nodeData: null,
                defaultProps: {
                    children: 'children',
                    label: 'name',
                    isLeaf: function (data, node) {
                        if (!data.haschildren) return true
                    }
                },
                showChooseApi: false, // 选择数源接口弹窗
                showDesign: false, // 新增线程弹窗
                showAddImport: false, // 新增入参弹窗
                showAddExport: false, // 新增出参弹窗
                header: [
                    {
                        prop: 'paramKey',
                        label: '参数名',
                        minWidth: 100,
                        align: 'center'
                    },
                    {
                        prop: 'paramName',
                        label: '参数含义',
                        minWidth: 500,
                        align: 'left',
                        headerAlign: 'center'
                    }
                ],
                detail: {}, // 编辑前详情
                activeStep: 1,
                infoForm: {
                    serviceName: '', // 接口名称
                    serviceCode: '', // 接口编码
                    overtime: '' // 超时时间
                },
                infoFormRules: {
                    serviceName: [
                        {required: true, message: '请输入接口名称', trigger: 'blur'}
                    ],
                    serviceCode: [
                        {required: true, message: '请输入接口编码', trigger: 'blur'}
                    ],
                    overtime: [
                        {required: true, message: '请输入超时时间', trigger: 'blur'}
                    ]
                },
                apiCheckedList: [], // 弹窗所选数源接口
                // apiList: [], // 左侧数源接口
                isEdit: false, // 是否正在编辑中
                chooseDesignList: [], // 线程设计选择列表
                addImportOptions: [], // 添加入参线程列表
                importLeftShow: false, // 添加入参左侧接口列表切换显示
                importRightShow: false, // 添加入参右侧接口列表切换显示
                addImportDesign: '', // 添加入参线程选择
                addImportDesignLeftList: [], // 添加入参左侧选择列表
                // 添加入参左侧选中项
                addImportDesignLeft: {
                    apiName: '',
                    apiId: '',
                    params: [],
                    paramName: '',
                    paramId: ''
                },
                addImportDesignLeftLoading: false,
                addImportDesignRightList: [], // 添加入参右侧选择列表
                // 添加入参右侧选中项
                addImportDesignRight: {
                    apiName: '',
                    apiId: '',
                    params: [],
                    paramName: '',
                    paramId: ''
                },
                addImportDesignRightLoading: false,
                addExportLeftList: [], // 添加出参左侧选择列表
                // 添加入参左侧选中项
                addExport: {
                    apiName: '',
                    apiId: '',
                    paramName: '',
                    paramId: ''
                },
                addExportRightLoading: false,
                addExportRightList: [], // 添加出参右侧选择列表
                from: '', // 上个页面来源
                showApiTest: false, // 接口测试弹窗
                apiTestResult: '', // 接口测试结果
                apiTestForm: [] // 接口测试表单
            }
        },
        mounted() {
            // json字段数
            // Object.keys(this.list).length
            if (this.$route.query.id) {
                this.id = this.$route.query.id
                this.getDetail()
            } else {
                this.isEdit = true
                this.showChooseApi = true
                this.infoForm = this.detailPageData.baseInfo
            }
        },
        methods: {
            getDetail() {
                this.loading = true
                this.$http.get('/EsbEncapsulation/detailPageData', {
                    id: this.id
                }).then(result => {
                    if (result.success) {
                        this.detail = result.data
                        this.detailPageData.relateInfo = result.data.relateInfo
                    }
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },
            changeEdit() {
                this.isEdit = !this.isEdit
                if (this.isEdit) {
                    this.activeStep = 1
                    this.getAllInfo()
                } else {
                    this.getDetail()
                }
            },
            getAllInfo() {
                this.loading = true
                this.$http.get('/EsbEncapsulation/getAllInfo', {
                    id: this.id
                }).then(result => {
                    if (result.success) {
                        this.detailPageData = result.data
                        this.infoForm = this.detailPageData.baseInfo
                    }
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },
            save() {
                if (this.apiCheckedList[0]) {
                    this.apiCheckedList.forEach(e => {
                        let exist = false // 当前选择接口已存在左侧列表中
                        this.detailPageData.relateInfo.map(obj => {
                            if (obj.id === e.id) exist = true
                        })
                        if (!exist) {
                            this.detailPageData.relateInfo.push({
                                id: e.code,
                                name: e.name
                            })
                        }
                    })
                }
                if (this.activeStep > 2) this.activeStep = 2
                this.close()
            },
            close(obj) {
                this.showChooseApi = false
            },
            // 数源接口获取
            loadNode(node, resolve) {
                this.$http.get('/EsbServiceTree/listSubId', {
                    id: node.data ? node.data.id : '' || 0
                }).then(result => {
                    return resolve(result.data)

                })
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        return false
                    }
                })
            },
            // 下一步
            stepNext() {
                if (Number(this.activeStep) === 1) {
                    this.validate('infoForm', () => {
                        this.activeStep++
                    })
                } else if (Number(this.activeStep) === 2) {
                    if (this.detailPageData.threadInfo[0]) {
                        this.activeStep++
                    } else {
                        this.$message({
                            type: 'info',
                            message: '请先添加线程!'
                        })
                    }
                } else if (Number(this.activeStep) === 3) {
                    if (this.detailPageData.paramConfInfo[0]) {
                        this.activeStep++
                    } else {
                        this.$message({
                            type: 'info',
                            message: '请先添加入参!'
                        })
                    }
                } else {
                    if (this.detailPageData.paramConfInfo[0]) {
                        this.$confirm('是否确认保存接口配置信息，保存将使接口下线', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.$http.post('/EsbEncapsulation/saveAllInfo', this.detailPageData).then(result => {
                                if (result.success) {
                                    this.backFrom()
                                }
                            })
                        }).catch(() => {
                        })
                    } else {
                        this.$message({
                            type: 'info',
                            message: '请先添加出参!'
                        })
                    }
                }
            },
            backFrom() {
                if (this.id) {
                    this.changeEdit()
                } else {
                    if (this.from === '/apiPackage') {
                        history.back()
                    } else {
                        this.$router.push('/apiPackage')
                    }
                }
            },
            // 新增接口选中&去除
            apiCheckChange(checked, data) {
                if (checked) {
                    this.apiCheckedList.push(data)
                } else {
                    if (this.apiCheckedList.length > 0) {
                        this.apiCheckedList.forEach((e, i) => {
                            if (e.id === data.id) {
                                this.apiCheckedList.splice(i, 1)
                            }
                        })
                    }
                }
            },
            // 打开新增线程窗口
            openDesign() {
                if (this.detailPageData.relateInfo.length < 1) {
                    this.$message({
                        type: 'info',
                        message: '请先添加左侧数源接口!'
                    })
                    return false
                }
                this.showDesign = true
                let relateInfo = JSON.parse(JSON.stringify(this.detailPageData.relateInfo))
                relateInfo.forEach(e => {
                    e.checked = false
                    e.exist = false
                    // 判断线程中是否已选择过改接口
                    // if (this.detailPageData.threadInfo.length > 0) {
                    //     this.detailPageData.threadInfo.map(item => {
                    //         let idList = item.list.map(obj => {
                    //             return obj.id
                    //         })
                    //         if (idList.indexOf(e.id) > -1) {
                    //             e.exist = true
                    //             e.checked = true
                    //         }
                    //     })
                    // }
                })
                this.chooseDesignList = JSON.parse(JSON.stringify(relateInfo))
            },
            // 保存线程
            saveDesign() {
                let checkList = []
                this.chooseDesignList.forEach(item => {
                    if (item.checked && !item.exist) {
                        checkList.push({
                            id: item.code || item.id,
                            name: item.name
                        })
                    }
                })
                if (checkList.length > 0) {
                    let num = this.detailPageData.threadInfo.length
                    this.detailPageData.threadInfo.push({
                        num: num + 1,
                        list: checkList
                    })
                }
                this.closeDesign()
            },
            // 关闭线程弹窗
            closeDesign() {
                this.showDesign = false
            },
            // 打开新增入参窗口
            openAddImport() {
                this.addImportOptions = []
                this.showAddImport = true
            },
            // 保存新增入参
            saveAddImport() {
                let leftMsg = this.addImportDesignLeft, rightMsg = this.addImportDesignRight, exist = false
                if (!leftMsg.paramId) {
                    this.$message({
                        type: 'info',
                        message: '请选择左侧接口入参!'
                    })
                    return false
                }
                if (!rightMsg.paramId) {
                    this.$message({
                        type: 'info',
                        message: '请选择右侧接口参数!'
                    })
                    return false
                }
                this.detailPageData.paramConfInfo.map(e => {
                    if (e.threadId === this.addImportDesign && e.paramId === leftMsg.paramId && e.relatedParamId === rightMsg.paramId) {
                        exist = true
                    }
                })
                if (!exist) {
                    this.detailPageData.paramConfInfo.push({
                        threadId: this.addImportDesign,
                        serviceId: leftMsg.apiId,
                        serviceName: leftMsg.apiName,
                        paramId: leftMsg.paramId,
                        paramKey: leftMsg.paramName,
                        relatedServiceId: rightMsg.apiId,
                        relatedServiceName: rightMsg.apiName,
                        relatedParamId: rightMsg.paramId,
                        relatedParamKey: rightMsg.paramName
                    })
                    this.closeAddImport()
                } else {
                    this.$message({
                        type: 'info',
                        message: '当前所选入参已存在!'
                    })
                }
            },
            // 关闭新增入参窗口
            closeAddImport() {
                this.showAddImport = false
                this.$nextTick(() => {
                    this.addImportDesign = null
                    this.importLeftShow = false
                    this.importRightShow = false
                    this.addImportDesignLeft = {
                        apiName: '',
                        apiId: '',
                        params: [],
                        paramName: '',
                        paramId: ''
                    }
                    this.addImportDesignRight = {
                        apiName: '',
                        apiId: '',
                        params: [],
                        paramName: '',
                        paramId: ''
                    }
                })
            },
            // 打开新增出参窗口
            openAddExport() {
                if (this.detailPageData.relateInfo.length < 1) {
                    this.$message({
                        type: 'info',
                        message: '请先添加左侧数源接口!'
                    })
                    return false
                }
                this.addExportLeftList = JSON.parse(JSON.stringify(this.detailPageData.relateInfo))
                this.showAddExport = true
            },
            // 保存新增出参
            saveAddExport() {
                let exist = false
                if (!this.addExport.apiId) {
                    this.$message({
                        type: 'info',
                        message: '请选择接口!'
                    })
                    return false
                }
                if (!this.addExport.paramId) {
                    this.$message({
                        type: 'info',
                        message: '请选择参数!'
                    })
                    return false
                }
                this.detailPageData.outputParamInfo.map(e => {
                    if (e.serviceId === this.addExport.apiId && e.paramId === this.addExport.paramId) {
                        exist = true
                    }
                })
                if (!exist) {
                    this.detailPageData.outputParamInfo.push({
                        serviceId: this.addExport.apiId,
                        serviceName: this.addExport.apiName,
                        paramId: this.addExport.paramId,
                        paramKey: this.addExport.paramName
                    })
                    this.closeAddExport()
                } else {
                    this.$message({
                        type: 'info',
                        message: '当前所选出参已存在!'
                    })
                }
            },
            // 关闭新增出参窗口
            closeAddExport() {
                this.showAddExport = false
                this.$nextTick(() => {
                    this.addExport = {
                        apiName: '',
                        apiId: '',
                        paramName: '',
                        paramId: ''
                    }
                })
            },
            // 删除线程
            removeThread(index, list) {
                this.$confirm('确定要删除该线程吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let oldListNum = list.num
                    this.detailPageData.threadInfo.splice(index, 1)
                    this.detailPageData.paramConfInfo = this.detailPageData.paramConfInfo.filter(e => {
                        if (e.threadId !== oldListNum) return e
                    })
                    if (this.detailPageData.threadInfo.length > 0) {
                        this.detailPageData.threadInfo.forEach((item, index) => {
                            let newNum = index + 1
                            if (this.detailPageData.paramConfInfo[0]) {
                                this.detailPageData.paramConfInfo.map(e => {
                                    if (e.threadId === item.num) e.threadId = newNum
                                })
                            }
                            item.num = index + 1
                        })
                    }
                }).catch(() => {

                })
            },
            // 新增入参选择线程值更改时
            changeImportDesign(value) {
                this.importLeftShow = false
                this.importRightShow = false
                this.addImportDesignLeft = {
                    apiName: '',
                    apiId: '',
                    params: [],
                    paramName: '',
                    paramId: ''
                }
                this.addImportDesignRight = {
                    apiName: '',
                    apiId: '',
                    params: [],
                    paramName: '',
                    paramId: ''
                }
                let designList = this.detailPageData.threadInfo.filter(e => {
                    if (e.num === value) return e
                })
                this.addImportDesignLeftList = JSON.parse(JSON.stringify(designList[0].list))
                this.addImportDesignRightList = JSON.parse(JSON.stringify(designList[0].list))
            },
            chooseDesignLeftApi(item, index) {
                if (index === 0) return false
                this.addImportDesignLeft.apiId = item.id
                this.addImportDesignLeft.apiName = item.name
                this.importLeftShow = true
                this.addImportDesignLeftLoading = true
                this.$http.get('/EsbInboundParam/pageData', {
                    current: 1,
                    paramMode: 1,
                    serviceId: item.id,
                    size: 10000
                }).then(result => {
                    if (result.success) {
                        let params = result.data.records
                        if (this.detailPageData.paramConfInfo[0]) {
                            params.forEach((item, index) => {
                                item.disabled = false
                                this.detailPageData.paramConfInfo.map(e => {
                                    if (e.paramId === item.id) item.disabled = true
                                })
                            })
                        }
                        this.addImportDesignLeft.params = params
                    }
                    this.addImportDesignLeftLoading = false
                }).catch(() => {
                    this.addImportDesignLeftLoading = false
                })
            },
            chooseDesignLeftParam(list) {
                if (list.disabled) return false
                this.addImportDesignLeft.paramId = list.id
                this.addImportDesignLeft.paramName = list.paramKey
                if (this.addImportDesignRightList.length > 0) {
                    this.addImportDesignRightList.map(e => {
                        if (e.id === this.addImportDesignLeft.apiId) {
                            e.disabled = true
                        } else {
                            e.disabled = false
                        }
                    })
                }
            },
            chooseDesignLeftBack() {
                this.addImportDesignLeft.apiId = ''
                this.addImportDesignLeft.apiName = ''
                this.addImportDesignLeft.paramId = ''
                this.addImportDesignLeft.paramName = ''
                this.importLeftShow = false
            },
            chooseDesignRightParam(list) {
                this.addImportDesignRight.paramId = list.id
                this.addImportDesignRight.paramName = list.paramKey
            },
            chooseDesignRightApi(item, index) {
                if (index + 1 === this.addImportDesignRightList.length) return false
                if (item.disabled) return false
                this.addImportDesignRight.apiId = item.id
                this.addImportDesignRight.apiName = item.name
                this.importRightShow = true
                this.addImportDesignRightLoading = true
                this.$http.get('/EsbInboundParam/pageData', {
                    current: 1,
                    // paramMode: 1,
                    serviceId: item.id,
                    size: 10000
                }).then(result => {
                    if (result.success) {
                        this.addImportDesignRight.params = result.data.records
                    }
                    this.addImportDesignRightLoading = false
                }).catch(() => {
                    this.addImportDesignRightLoading = false
                })
            },
            chooseDesignRightBack() {
                this.addImportDesignRight.apiId = ''
                this.addImportDesignRight.apiName = ''
                this.addImportDesignRight.paramId = ''
                this.addImportDesignRight.paramName = ''
                this.importRightShow = false
            },
            chooseExportLeftApi(item) {
                this.addExport.apiId = item.code || item.id
                this.addExport.apiName = item.name
                this.addExport.paramId = ''
                this.addExport.paramName = ''
                this.importLeftShow = true
                this.addExportRightLoading = true
                this.$http.get('/EsbInboundParam/pageData', {
                    current: 1,
                    paramMode: 2,
                    serviceId: item.id,
                    size: 10000
                }).then(result => {
                    if (result.success) {
                        this.addExportRightList = result.data.records
                    }
                    this.addExportRightLoading = false
                }).catch(() => {
                    this.addExportRightLoading = false
                })
            },
            chooseExportRightParam(item) {
                this.addExport.paramId = item.id
                this.addExport.paramName = item.paramKey
            },
            // 删除入参
            removeImport(index) {
                this.$confirm('确定要删除该入参吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.detailPageData.paramConfInfo.splice(index, 1)
                }).catch(() => {
                })
            },
            // 删除出参
            removeExport(index) {
                this.$confirm('确定要删除该出参吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.detailPageData.outputParamInfo.splice(index, 1)
                }).catch(() => {
                })
            },
            // 删除左侧数源接口
            removeRelateInfo(index) {
                this.$confirm('确定要删除该数源接口吗，删除后需重新编辑接口信息', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.detailPageData.relateInfo.splice(index, 1)
                    if (this.activeStep > 2) this.activeStep = 2
                }).catch(() => {
                })
            },
            // 打开接口测试弹窗
            openApiTest() {
                this.apiTestForm = []
                if (this.detail.input[0]) {
                    this.detail.input.forEach(item => {
                        this.apiTestForm.push({
                            value: '',
                            key: item.paramKey
                        })
                    })
                }
                this.showApiTest = true
            },
            // 保存接口测试
            saveApiTest() {
                let params = {}
                if (this.apiTestForm[0]) {
                    this.apiTestForm.map(e => {
                        params[e.key] = e.value
                    })
                }
                this.$http.post('/EsbEncapsulation/simulation', {
                    id: this.detail.base.id,
                    params: params
                }).then(result => {
                    this.apiTestResult = JSON.stringify(result)
                })
            },
            // 关闭接口测试
            closeApiTest() {
                this.showApiTest = false
                this.apiTestResult = ''
            },
            // 线程选择接口上下移动
            moveList(type, item, index) {
                let oldItem = item
                this.chooseDesignList.splice(index, 1)
                if (type) {
                    // 向下移动
                    this.chooseDesignList.splice(index + 1, 0, oldItem)
                } else {
                    // 向上移动
                    this.chooseDesignList.splice(index - 1, 0, oldItem)
                }
            }
        },
        components: {
            dialogMsk,
            tableExample
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.from = from.path
            })
        }
    }
</script>

<style scoped lang="less">
    .package-detail {
        padding: .2rem .1rem;
        background-color: #fff;
    }

    .cont-left {
        background-color: #fff;
        border-right: 1px solid #eee;
        padding: 0 .1rem;

        .head {
            font-size: .16rem;
            font-weight: bolder;
            line-height: .42rem;
            height: .42rem;
            padding: 0 .1rem;
            /*border-bottom: 1px solid #eee;*/

            .add {
                float: right;
                height: 100%;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;

                i {
                    padding: .02rem;
                    font-weight: bolder;
                    color: #5586FB;
                    border: .02rem solid #5586FB;
                    font-size: .12rem;
                    border-radius: 4px;
                }
            }
        }

        .list {
            padding: .1rem 0;

            > div {
                display: block;
                font-size: .14rem;
                padding: 0 .2rem 0 .1rem;
                line-height: .28rem;
                cursor: pointer;

                &:hover {
                    background-color: #F1F5FD;

                    .remove {
                        display: block;
                    }
                }
            }

            .icon {
                font-size: .14rem;
                margin-right: .08rem;
                color: #05CD8C;
            }

            .remove {
                display: none;
                float: right;
                margin-left: .05rem;
                margin-right: -.16rem;
                color: #5586FB;
            }
        }
    }

    .cont-right {
        background-color: #fff;
    }

    .detail {
        width: 90%;

        .title {
            margin: .1rem 0;
            font-size: .16rem;
            font-weight: bolder;
        }

        .cont {
            padding: 0 .16rem;
        }
    }

    .steps {
        .step {
            position: relative;
            overflow: hidden;

            .step-head {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                width: .28rem;

                &:before {
                    content: '';
                    position: absolute;
                    width: 2px;
                    height: 100%;
                    top: .27rem;
                    bottom: 0;
                    left: 50%;
                    margin-left: -1px;
                    background-color: #5586FB;
                }

                .icon {
                    width: .28rem;
                    height: .28rem;
                    color: #5586FB;
                    position: relative;

                    i {
                        font-size: .28rem;
                        line-height: 1;
                        vertical-align: top;
                    }

                    span {
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: .16rem;
                        color: #fff;
                        z-index: 2;
                    }
                }
            }

            .step-main {
                margin-left: .4rem;

                .title {
                    font-size: .16rem;
                    margin-top: .02rem;
                    margin-bottom: .2rem;
                    font-weight: bolder;

                    .add {
                        font-weight: normal;
                        display: inline-block;
                        font-size: .14rem;
                        margin-left: .2rem;
                        color: #5586FB;
                        cursor: pointer;
                    }
                }

                .design, .import, .export {
                    padding-bottom: .3rem;

                    .list {
                        width: 100%;
                        display: flex;
                        align-items: center;

                        > div {
                            margin-right: .15rem;
                            max-width: 8.4rem;
                        }

                        .cont {
                            ul {
                                li {
                                    float: left;
                                    width: 2rem;
                                    padding: .05rem .15rem;
                                    text-align: center;
                                    background-color: #F1F5FD;
                                    font-size: .14rem;
                                    line-height: .24rem;
                                    height: .34rem;
                                    margin: .05rem 0;
                                    margin-right: .1rem;
                                }
                            }

                            .icon {
                                float: left;
                                height: .34rem;
                                line-height: .34rem;
                                margin: .05rem .08rem .05rem -.02rem;
                                color: #F0B53E;

                                i {
                                    font-size: .14rem;
                                    vertical-align: top;
                                }
                            }
                        }

                        .remove {
                            cursor: pointer;
                            color: #5586FB;
                        }
                    }
                }
            }

            &:last-child {
                .step-head:before {
                    display: none;
                }
            }

            /*&.finish {*/
            /*    .step-head {*/
            /*        span {*/
            /*            display: none;*/
            /*        }*/
            /*    }*/
            /*}*/
        }
    }

    .add-import-content, .add-export-content {
        display: flex;
        align-items: center;

        .left, .right {
            width: 47%;
            border: 1px solid #eee;
            height: 3rem;
        }

        .middle {
            width: 6%;
            text-align: center;
            color: #F0B53E;
        }

        .api-list, .params-list {
            height: 100%;
            padding: .1rem;

            .list-cont {
                height: 100%;
                overflow-y: auto;
            }

            .title, .list {
                padding: .05rem .1rem;
            }

            .title {
                padding-left: 0;
                padding-top: .06rem;
                padding-bottom: .06rem;
                /*border-bottom: 1px solid #eee;*/
                font-weight: bolder;
                margin-bottom: .05rem;
                width: 100%;

                .back {
                    cursor: pointer;
                    font-weight: bolder;
                    margin-right: .02rem;
                }
            }

            .list {
                display: block;
                width: 100%;
                padding-right: .3rem;
                cursor: pointer;

                &:hover {
                    background-color: #eee;
                }

                &.active {
                    background-color: #eee;
                }

                &.disabled {
                    cursor: not-allowed;
                    background-color: #f7f7f7;
                    color: #999;

                    &:hover {
                        background-color: #f7f7f7;
                    }
                }

                .checked {
                    float: right;
                    margin-right: -.2rem;
                    color: #5586FB;
                }
            }

        }

        .empty {
            text-align: center;
            color: #999;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .add-import-head {
        margin-bottom: .2rem;
        display: flex;
        align-items: center;

        span {
            margin-right: .1rem;
            white-space: nowrap;
        }

        .el-select {

        }
    }

    .design-list {
        max-height: 3rem;
        overflow: auto;

        > div {
            display: block;
            line-height: .3rem;
            cursor: pointer;
            padding: 0 .1rem;

            .icon {
                float: right;
                margin-left: .1rem;
                /*display: none;*/
                visibility: hidden;

                i {
                    font-size: .14rem;
                    color: #3489f2;
                }
            }

            &:hover {
                background-color: #f7f7f7;

                .icon {
                    /*display: block;*/
                    visibility: visible;
                }
            }
        }

        .el-checkbox {
            margin-right: .05rem;
        }
    }

    .apiTest {
        .title {
            font-weight: bolder;
            font-size: .14rem;
            line-height: .3rem;
            margin-bottom: .1rem;
        }

        /deep/ .el-form {
            max-height: 2rem;
            overflow-y: auto;
            padding: 0 .1rem;

            .el-form-item {
                &:last-child {
                    margin-bottom: .1rem;
                }

                .label {
                    font-size: .14rem;
                }
            }
        }

        .result {
        }
    }

    .file {
        color: #FFCA28;
    }

    /deep/ .input-number {
        line-height: 1;

        .el-input__inner {
            padding: 0 .15rem;
            text-align: left;
        }
    }

    .service-tree {
        height: 2.5rem;
        overflow-y: auto;
    }

    .el-tree-node__label {
        margin-left: .08rem;
    }
</style>
